<template>
  <el-dialog
    title="查看租期"
    :visible.sync="dialogVisible"
    width="1000px"
  >
    <el-table
      :data="tableData"
      border
    >
      <el-table-column
        label="订单"
        prop="trade_no"
        width="120"
      ></el-table-column>
      <el-table-column
        align="center"
        label="期数"
        width="80"
      >
        <template slot-scope="scope">
          <span>{{scope.row.which_period}}/{{scope.row.month_total}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="租期"
        width="120"
      >
        <template slot-scope="scope">
          <span>{{scope.row.begin_time}} 至 {{scope.row.end_time}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="租金"
        width="120"
      >
        <template slot-scope="scope">
          <span>￥{{scope.row.rent}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="状态"
        width="100"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.status==0||scope.row.status==4?'':'success'">{{scope.row.status==1?'已支付':scope.row.status==2?'已退款':scope.row.status==3?'已买断':scope.row.status==4?'已逾期':scope.row.status==5?'线下支付':'未支付'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="支付时间"
        prop="pay_time"
        width="100"
      ></el-table-column>
      <el-table-column
        align="center"
        label="预计扣款日"
        prop="begin_time"
        width="100"
      ></el-table-column>
      <el-table-column
        align="center"
        label="流水号"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{scope.row.pay_time?scope.row.alipay_trade_no:''}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="自动扣款功能"
      >
      <template slot-scope="scope">
        <el-switch
          v-model="scope.row.withhold_status"
          active-color="#2993FF"
          inactive-color="#666666"
          :active-value="1"
          :inactive-value="2"
          @change="switchChange(scope.row)"
        >
        </el-switch>
      </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="viewLog(scope.row)"
            >查看记录</el-button
          >
          <el-button
            v-if="scope.row.is_withhold==1&&scope.row.pay_type!=1&&$hasMethod('#withhold')"
            type="warning"
            size="mini"
            @click="withholdItem(scope.row)"
            >发起代扣</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        type="primary"
        @click="dialogVisible=false"
      >关闭</el-button>
    </div>
    <deduct-log
      ref="deductLog"
      :order-no="selectedItem.trade_no"
      :lease-id="selectedItem.id"
    ></deduct-log>
  </el-dialog>
</template>

<script>
import { getLease } from "@/api/order";
import { manualWithholding, withholdSwitch } from "@/api/finance";
import deductLog from "./deductLog";
export default {
  props: ['orderId'],
  components: { deductLog },
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      selectedItem: {}
    };
  },
  methods: {
    switchChange(row) {
      withholdSwitch({
        orderId: row.order_id,
        leaseId: row.id,
        withholdStatus: row.withhold_status,
      }).then(res => {
        this.$parent.getList(true);
      })
    },
    viewLog(row){
      this.selectedItem = {...row}
      this.$refs.deductLog.dialogVisible = true;
    },
    withholdItem(row){
      console.log('row2',row)
      this.$confirm("您确定要发起代扣吗？", "发起代扣", {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        manualWithholding({ 
          orderId: row.order_id, 
          leaseId: row.id 
        }).then(res => {
          setTimeout(() => {
            this.$parent.getList(true);
          }, 1000);
        })
      }).catch(() => { });
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        getLease(this.orderId).then(res => {
          this.tableData = res || [];
        })
      }
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.el-dialog__body {
  max-height: 650px;
  overflow: auto;
}
</style>